<!-- 
  cell-props 高亮显示鼠标悬停单元格
  default-expanded-row-keys 默认展开的行的 key 的数组, 这个数据不是响应式的
 -->

<!-- 
  row-expand            点击箭头图标展开/折叠树节点时触发
  expanded-rows-change  行展开状态改变时触发
  -->
<template>
  <div class="tableBaseVirRoot">
    <el-auto-resizer>
      <template #default="{ height, width }">
        <el-table-v2
          v-model:expanded-row-keys="expandedRowKeys"
          :columns="columns"
          :data="treeData"
          :width="width"
          :height="height"
          :expand-column-key="expandColumnKey"
          :row-height="30"
          :header-height="30"
          row-class="rowClass"
          :default-expanded-row-keys="defaultExpandedRowKeys"
          @row-expand="onRowExpanded"
          @expanded-rows-change="onExpandedRowsChange"
        >
          <template #cell="cell">
            <!-- {{ cell.rowData[cell.dataKey] }} -->

            <slot v-if="cell.column.slot" name="column" :scope="cell" :column="cell.column"> </slot>
            <component
              v-else
              v-model="cell.rowData[cell.column.dataKey]"
              parentType="table"
              :is="componentFilter(cell.column.component)"
              :row="cell.rowData"
              :prop="cell.column.dataKey"
              :scope="cell"
              v-bind="cell.column.bindConfig"
              @itemEvent="data => emits('itemEvent', { ...data, scope: cell })"
            />
          </template>
        </el-table-v2>
      </template>
    </el-auto-resizer>
  </div>
</template>

<script lang="tsx" setup>
import { ref, computed, onMounted } from 'vue';
import type { ExpandedRowsChangeHandler, RowExpandHandler } from 'element-plus';
import componentData from './config';
import { ElButton } from 'element-plus';
const props = defineProps({
  tableColumn: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  expandColumnKey: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['itemEvent']);

onMounted(() => {
  init();
});
const componentFilter = (val = 'text') => {
  return componentData[val];
};

const flattenArr = arr => {
  return arr
    .map(item => [item, ...(Array.isArray(item.children) ? flatten(item.children) : [])])
    .flat(Infinity);
};

const init = () => {
  let arr = flattenArr(props.tableData);
  console.log(arr);

  arr.forEach(item => {
    console.log(item);
  });
};

// 处理列信息
const generateColumns = tableColumn => {
  return Array.from(props.tableColumn).map((item, index) => ({
    ...item,
    key: item.key || index,
    dataKey: item.prop,
    title: item.label,
    width: item.width || 100,
    headerClass: item.headerClass || 'headerClassVir',
    class: item.class || 'classVir',
    // cellRenderer: item.component
    //   ? () => (
    //       <>
    //         <item.component size='small'>Edit</item.component>
    //         <item.component size='small' type='danger'>
    //           Delete
    //         </item.component>
    //       </>
    //     )
    //   : null,
  }));
};

const unflatten = () => {
  return props.tableData;
};

const onRowExpanded = ({ expanded }: Parameters<RowExpandHandler<any>>[0]) => {
  console.log('Expanded:', expanded);
};

const onExpandedRowsChange = (expandedKeys: Parameters<ExpandedRowsChangeHandler>[0]) => {
  console.log('expandedKeys', expandedKeys);
};

// 处理后的表信息
const treeData = computed(() => unflatten(props.tableData));

// 处理后的列信息 组件仅接受数组
const columns = generateColumns([]);

const expandedRowKeys = ref<string[]>([]);
const defaultExpandedRowKeys = ref<string[]>([
  '1589868643260891944',
  '1589868643260891200',
  '1589868643260891201',
  '1589868643260891202',
]);

const expandColumnKey = props.expandColumnKey;
//
</script>

<style lang="scss" scoped>
[data-key='hovering-col-0'] {
  font-weight: bold;
  user-select: none;
  pointer-events: none;
}
.tableBaseVirRoot {
  width: calc(100%);
  height: calc(100% - 40px);
}
.headerClassVir {
  color: red;
  background-color: red;
}
.classVir {
  color: red;
  background-color: red;
  border: solid 1px #ccc;
}

.rowClass {
  color: red;
  background-color: red;
}
</style>
